<template>
  <div class="btns" style="margin-top:10px">
    <a href="javascript:;" class="btn-2 btn-play" @click="switchPL(topDetailList.id)" title="播放">
      <i>
        <em></em>播放
      </i>
    </a>
    <a href="javascript:;" class="btn-i btn-add" title="添加到播放列表" @click="switchPL(topDetailList.id)">
    </a>
  </div>
  <div>
    <table class="m-table">
      <tbody>
        <tr v-for="(item, i) in musicList" :key="item.id">
          <td>
            <span class="num">
              {{i+1}}
            </span>
            <span class="play" @click="addmu(item.id)"></span>
          </td>
          <td class="rank">
            <div class="tt">
              <a :href="'http://localhost:8080/#/song?id=' + item.id" class="sn overel"
                :title="item.name">{{item.name}}&nbsp;</a>
            </div>
          </td>
          <td class="time">
            <span>
              {{showTime(item.dt)}}
            </span>
            <div class="options show">
              <a href="javascript:;" @click="addmu(item.id)" class="icon first"></a>
              <a href="javascript:;" class="icn i-fav"></a>
              <a href="javascript:;" class="icn i-share"></a>
              <a href="javascript:;" class="icn i-dl"></a>
            </div>
          </td>
          <td>
            <div class="overel">
              <a :href="'http://localhost:8080/#/songer?id=' + item.id">{{item.ar[0].name}}</a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'songermu',
  data () {
    return {
      id: this.$route.query.id,
      musicList: []
    }
  },
  methods: {
    ...mapMutations(['addMusic']),
    async info () {
      const { data: mu } = await this.$http.get('artists', {
        params: {
          id: this.id
        }
      })
      if (mu.code == 200) {
        this.musicList = mu.hotSongs
      }
    },
    // 播放时长处理函数
    showTime (val) {
      let m = Math.floor(val / 1000 / 60)
      let s = Math.floor(val / 1000 % 60)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    async addmu (id) {
      let { data: mu } = await this.$http.get('song/detail', {
        params: {
          ids: id
        }
      })
      mu = mu.songs
      this.addMusic(mu);
    },
  },
  created () {
    this.info()
  },
}
</script>

<style lang='less' scoped>
thead {
  tr {
    th {
      height: 38px;
      .wp {
        padding: 8px 10px;
        color: #666666;
        background-position: 0 -56px;
        background-repeat: no-repeat;
      }
      &:nth-child(1) {
        width: 77px;
      }
      &:nth-child(2) {
        width: 326px;
      }
      &:nth-child(3) {
        width: 91px;
      }
      &:nth-child(4) {
        width: 26%;
      }
    }
  }
}
tbody {
  td {
    padding: 6px 10px;
    line-height: 18px;
    background-color: #f7f7f7;
    &:nth-child(1) {
      position: relative;
      width: 74px;
      .play {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 8px;
        width: 17px;
        height: 17px;
        background-repeat: no-repeat;
        background-position: 0 -103px;
        cursor: pointer;
        &:hover {
          background-position: 0 -128px;
        }
      }
    }
    &:nth-child(2) {
      width: 326px;
    }
    &:nth-child(3) {
      width: 69px;
    }
    &:nth-child(4) {
      width: 20%;
    }
    .num {
      margin-left: 10px;
      color: #666666;
    }
  }
  .rank {
    padding-top: 10px;
    padding-bottom: 10px;
    .tt {
      display: flex;
      align-items: center;
    }
    .lf-bg {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin-right: 14px;
      img {
        width: 100%;
      }
    }
    .sn {
      &:hover {
        text-decoration: underline;
      }
    }
    p {
      color: #beaebe;
    }
  }
  .options {
    float: left;
    .first {
      width: 13px;
      height: 13px;
      background-position: 0 -700px;
      &:hover {
        background-position: -22px -700px;
      }
    }
    .i-fav {
      background-position: 0 -174px;
      &:hover {
        background-position: -20px -174px;
      }
    }
    .i-share {
      background-position: 0 -195px;
      &:hover {
        background-position: -20px -195px;
      }
    }
    .i-dl {
      background-position: -81px -174px;
      &:hover {
        background-position: -104px -174px;
      }
    }
    a {
      float: left;
      width: 18px;
      height: 16px;
    }
  }
  .show {
    display: none;
  }
  .overel {
    a {
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

tbody tr:hover .time span {
  display: none;
}
tbody tr:hover .time .show {
  display: block;
}
</style>